<template>
    <view class="qrcode">
<!--        <image class='qr-title' :src='codeTitleImg'></image>-->
        <view class='container'>
            <image   mode="scaleToFill" :src="imagePath"></image>
            <button class='btn' @tap="handleSavePoster()">保存</button>
        </view>

        <!-- 画布，用来画二维码，只用来站位，不用来显示-->
        <view class="canvas-code">
            <canvas :hidden="canvasHidden" style="width: 500rpx;height: 500rpx;background:#f1f1f1;" canvas-id="canvasCode" />
        </view>
        <view class="canvas-box">
            <canvas :hidden="canvasHidden" style="width: 750rpx;height: 1334rpx;background:#f1f1f1;" canvas-id="mycanvas" />
        </view>
    </view>
</template>

<script>
    import qrCode from '../../common/qrCode.js'
    export default {
        data() {
            return {
                canvasHidden: false,
                imagePath: '',
                // codeTitleImg:'https://test.hrycf.com/hryxcx/codeTitle.png'
                codeTitleImg:''
            }
        },
        onLoad: function(options) {
            let jiaoyanCode=''
            if(options.inviteId){
                jiaoyanCode = 'https://test.scxhrd.com?invite_code='+options.inviteId;
            }else {
                jiaoyanCode='https://test.scxhrd.com?invite_code='+''
            }
            var size = this.setCanvasSize(); //动态设置画布大小
            this.createQrCode(jiaoyanCode, "canvasCode", size.w, size.h);
            // this.createPoster()
        },
        methods:{
            //适配不同屏幕大小的canvas
            setCanvasSize(){
                var size = {};
                try {
                    var res = uni.getSystemInfoSync();
                    var scale = 750 / 500; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
                    var width = res.windowWidth / scale;
                    var height = width; //canvas画布为正方形
                    size.w = width;
                    size.h = height;
                    console.log(size.w,size.h)
                } catch (e) {
                    // Do something when catch error
                    console.log("获取设备信息失败" + e);
                }
                return size;
            },
            /**
             * 绘制二维码图片
             */
            createQrCode(url, canvasId, cavW, cavH) {
                uni.showLoading({
                    title:'加载中...',
                    duration:1000
                })
                //调用插件中的draw方法，绘制二维码图片
                qrCode.api.draw(url, canvasId, cavW, cavH);
                setTimeout(() => {
                    this.canvasToTempImage();
                }, 1000);
            },
            /**
             * 获取临时缓存照片路径，存入data中
             */
            canvasToTempImage() {
                var that = this;
                //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
                uni.canvasToTempFilePath({
                    canvasId: 'canvasCode',
                    width:400,
                    height:400,
                    success: function(res) {
                        var tempFilePath = res.tempFilePath;
                        that.imagePath = tempFilePath
                        that.imagePath.replace("http:","https:")
                        that.createPoster()

                    },
                    fail: function(res) {
                        console.log(res);
                    }
                });
            },
            //生成海报
            createPoster(){
                let _that=this
                let ctx=uni.createCanvasContext('mycanvas')
                let res = uni.getSystemInfoSync();
                let scale = 750 / 750; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
                let c_width = res.windowWidth / scale;
                let c_height = res.windowHeight / scale; //canvas画布为正方形
                ctx.width=c_width
                ctx.height=c_height
                ctx.draw()
                //将网络图片转换为本地图片
                uni.getImageInfo({
                    src:'https://xhrdadmin.scxhrd.com/upload/file/2715597u97kt.jpg',
                    success:(res)=>{
                        ctx.save();
                        ctx.drawImage(res.path,0,0,c_width,c_height);
                        ctx.restore();
                        ctx.draw(true);
                        uni.getImageInfo({
                            src:_that.imagePath,
                            success:(res2)=>{
                                ctx.save();
                                ctx.drawImage(res2.path,c_width*0.2,100+c_width*0.25+60,c_width*0.6,c_width*0.6);
                                ctx.restore();
                                ctx.draw(true);
                                uni.hideLoading({

                                })
                            },
                            fail:(err)=>{
                                uni.showToast({
                                    title: '生成二维码失败',
                                    duration: 2000,
                                    icon: 'none'
                                })
                            }
                        })
                        // uni.getImageInfo({
                        //     src:_that.codeTitleImg,
                        //     success:(res1)=>{
                        //         ctx.save();
                        //         ctx.drawImage(res1.path,c_width*0.25,100,c_width*0.5,c_width*0.5*0.5);
                        //         ctx.restore();
                        //         ctx.draw(true);
                        //         uni.hideLoading({
                        //
                        //         })
                        //     },
                        //     fail:(err)=>{
                        //         uni.showToast({
                        //             title: '生成二维码失败',
                        //             duration: 2000,
                        //             icon: 'none'
                        //         })
                        //     }
                        // })
                    },

                    fail:(err)=>{
                        uni.showToast({
                            title: '生成二维码失败',
                            duration: 2000,
                            icon: 'none'
                        })
                    }
                })
            },
            //保存海报
            handleSavePoster(){
                let _that=this
                wx.getSetting({
                    success(res) {
                        if (!res.authSetting['scope.writePhotosAlbum']) {
                            uni.authorize({
                                scope: 'scope.writePhotosAlbum',
                                success() {
                                    _that.saveImage()
                                },fail(res){
                                    _that.auth = true
                                    uni.showToast({
                                        title: '请点击前往权限设置',
                                        duration: 2000,
                                        icon: 'none'
                                    })
                                }
                            })
                        } else{
                            _that.saveImage()
                        }
                    }
                })
            },
            saveImage(){
                let _this=this
                wx.showLoading({
                    title: '保存中...'
                })
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 750, // 画布的宽
                    height: 1334, // 画布的高
                    destWidth: (this.phoneW - 100) * 5,
                    destHeight: (this.phoneH - 120) * 5,
                    canvasId: 'mycanvas',
                    success:(res)=>{
                        console.log(res.tempFilePath)
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success(res2) {

                                wx.hideLoading();
                                uni.showToast({
                                    title: '图片保存成功到您的相册',
                                    duration: 2000,
                                    icon: 'none'
                                })
                            },
                            fail() {
                                uni.showToast({
                                    title: '保存失败，稍后再试',
                                    duration: 2000,
                                    icon: 'none'
                                })
                                wx.hideLoading();
                            }
                        })
                    }
                })
            }

        }
    }
</script>
<style>
    page {
        background-image: url("https://xhrdadmin.scxhrd.com/upload/file/2715597u97kt.jpg");
        background-size: 100% 100%;
    }
</style>

<style lang="less" scoped>
    .qrcode{
        width: 100%;
        /*background-image: url("https://test.hrycf.com/hryxcx/usercodeBground.jpg");*/
        /*background-size: 100% 100%;*/
        /*position: relative;*/
        .qr-title{
            display: block;
            width: 400rpx;
            height: 180rpx;
            position: absolute;
            left: 50%;
            top: 100rpx;
            transform: translate(-50%,0);
        }
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        .btn{
            width: 300rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #FD8959;
            position: absolute;
            left: 50%;
            bottom: 80px;
            transform: translate(-50%,0);
            border: solid 1px #ffffff;
            color: #ffffff;
        }
    }

    .container image {
        width: 400rpx;
        height: 400rpx;
        position: absolute;
        display: block;
        top: 40%;
        left: 50%;
        transform: translate(-50%,0);
        background-color: #f9f9f9;
    }

    .canvas-box {
        position: fixed;
        top: 9999999rpx;
        left: 0;
    }
    .canvas-code{
        position: fixed;
        top: 999999rpx;
        left: 0;
    }
</style>
